<template>
    <div class="pie-container">
        <div id="pieMain" style="width: 100%; height: 400px;"></div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, watch,nextTick} from 'vue'
import * as echarts from 'echarts'
const props = defineProps({
  config: {
    type: Object,
    default: () => {},
  },
})
const pieChart = ()=> {
    let option = {
        legend: {
            right: '50px',
            top: '30px',
            // data: ['美元', '人民币']
        },
        series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
        // grid: {
        //     left: '3%',  // 默认 3% 可能不够
        //     right: '4%', // 默认 4% 可能不够
        //     bottom: '3%',
        //     containLabel: true // 确保坐标轴标签不被截断
        // },
        // xAxis: {
        //     type: 'category',
        //     data: Array.from(props.config.xAxisData)
        // },
        // yAxis: {
        //     type: 'value'
        // },
        // series: [
        //     {
        //         name: '美元',
        //         type: 'bar',
        //         data: Array.from(props.config.yAxisDataUSD)
        //     },
        //     {
        //         name: '人民币',
        //         type: 'bar',
        //         data: Array.from(props.config.yAxisDataCNY)
        //     }
        // ]
    }
    nextTick(() => { 
        echarts.init(document.getElementById('pieMain')).setOption(option);
    })
}
watch(() => props.config,(newVal, oldVal) =>{
  console.log("11111",props.config)
  console.log("22222",props.lineChartInfo)
  pieChart()
},{deep:true})
onMounted(() => { 
  // linChart()
})  
</script>
<style lang="scss" scoped></style>